<div class="breadcrumb-area breadcrumb-bg pt-85 pb-85 mb-80">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="breadcrumb-container">
                    <ul>
                        <li><a href="/">Home</a> <span class="separator">/</span></li>
                        <li class="active">Cart</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="page-section mb-80">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <!--=======  cart table  =======-->
                <div class="cart-table table-responsive mb-40">
                    <table class="table">
                        <thead>
                        <tr>
                            <th class="pro-thumbnail">Image</th>
                            <th class="pro-title">Product</th>
                            <th class="pro-title">SKU</th>
                           <!-- <th class="pro-price">Price</th>  -->
                           <!-- <th class="pro-quantity">Quantity</th> -->
                            <th class="pro-subtotal">Total</th>
                            <th class="pro-remove">Remove</th>
                        </tr>
                        </thead>
                        <tbody id="x_cart">
                        {volist name='list' id='vo'}
                        <tr class="x-{$vo['id']}">
                            <td class="pro-thumbnail">
                                <a href="{:url('home/product/show')}?id={$vo.product_id}">
                                    <img src="{$vo.product_pic}" class="img-fluid" alt="Product">
                                </a>
                            </td>
                            <td class="pro-title">
                                <a href="{:url('home/product/show')}?id={$vo.product_id}">{$vo.product_title}</a>
                            </td>
                            <td class="pro-price"><span>{$vo.sku}</span></td>
                            <!--<td class="pro-price"><span>${$vo.product_price}</span></td> -->
                            <td class="pro-quantity">
                                <div class="pro-qty" data-id="{$vo.id}"><input type="text" value="{$vo.num}" readonly></div>
                            </td>
                           <!-- <td class="pro-subtotal"><span>${$vo.price}</span></td> -->
                            <td class="pro-remove remove-item" data-id="{$vo.id}" data-tp="2">
                                <a href="javascript:;"><i class="fa fa-trash-o"></i></a>
                            </td>
                        </tr>
                        {/volist}
                        </tbody>
                    </table>
                </div>

                <div class="row">
                    <div class="col-12 d-flex">
                        <!--=======  Cart summery  =======-->
                        <div class="cart-summary">
                           <!-- <div class="cart-summary-wrap">
                                <h4>Cart Summary</h4>
                                <p>Sub Total <span class="x_total">${$total}</span></p> -->
                                <!--                                <p>Shipping Cost <span>$00.00</span></p>-->
                            <!--    <h2>Grand Total <span class="x_total">${$total}</span></h2>
                            </div> -->
                            <div class="cart-summary-button">
                                <button class="checkout-btn">Checkout</button>
                            </div>
                        </div>

                        <!--=======  End of Cart summery  =======-->

                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<script>
    $(".checkout-btn").click(function () {
        window.location.href = "{:url('home/order/checkout')}";
    })
</script>
<!--=====  End of Cart page content  ======-->
